<template>
  <div id="tabber">
    <u-tabbar
        :value="value"
        :fixed="true"
        :placeholder="true"
        :safeAreaInsetBottom="true"
        activeColor="#d81e06"
    >
      <u-tabbar-item class="icon-size" text="首页" @click="Go('/pages/index/index',0)">
        <image
            class="u-page__item__slot-icon"
            slot="active-icon"
            src="/static/tabbar/home-active.png"
        ></image>
        <image
            class="u-page__item__slot-icon"
            slot="inactive-icon"
            src="/static/tabbar/home.png"
        ></image>
      </u-tabbar-item>
      <u-tabbar-item class="icon-size" text="购物车" @click="Go('/pages/cart/index',1)">
        <image
            class="u-page__item__slot-icon"
            slot="active-icon"
            src="/static/tabbar/cart-active.png"
        ></image>
        <image
            class="u-page__item__slot-icon"
            slot="inactive-icon"
            src="/static/tabbar/cart.png"
        ></image>
      </u-tabbar-item>
      <u-tabbar-item class="icon-size" text="我的" @click="Go('/pages/user/index',2)">
        <image
            class="u-page__item__slot-icon"
            slot="active-icon"
            src="/static/tabbar/user-active.png"
        ></image>
        <image
            class="u-page__item__slot-icon"
            slot="inactive-icon"
            src="/static/tabbar/user.png"
        ></image>
      </u-tabbar-item>
    </u-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  props: {
    value: {
      type: Number,
      default: 0
    }
  },
  methods: {
    Go(url, index) {
      console.log(123312312);
      if (index === this.value) return
      uni.redirectTo({
        url,
      });
    }
  }
}
</script>

<style>
.u-page__item__slot-icon {
  width: 50rpx;
  height: 45rpx;
}

</style>
